<template>
    <figure>
      <router-link :to="{name: 'Archive'}">
        <div class="archive-intro">
          <div class="archive-item-award">{{item.award}}</div>
          <div class="archive-item-title">{{item.title}}</div>
          <div class="archive-item-author">{{item.author}}</div>
        </div>
        <div class="archive-img">
          <img :src="item.thumb" :alt="item.title" class="fluid-img">
        </div>
      </router-link>
    </figure>
</template>
<script>
export default {
  name: 'ArchiveCard',
  props: {
    item: {
      type: Object
    },
  }
}
</script>
<style scoped lang="scss">
  figure {
    position: relative;
    z-index: 1;
    margin: 0 20px;
    padding: 45px;
    display: block;
    text-align: center;
    &::before {
      content: "";
      z-index: -1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid #888;
      -webkit-transition: border .25s;
      transition: border .25s
    }
    &::after {
      content: "";
      z-index: 2;
      position: absolute;
      top: 15px;
      right: 15px;
      width: 15px;
      height: 16px;
      background: url('~@/assets/img/archive_arrow.png') no-repeat center center;
      opacity: 0;
      transform: translate(-4px, 4px);
      transition: all .2s;
    }
    &:hover {
      &::after {
        transform: translate(0, 0);
        opacity: 1;
      }
      &::before {
        border-color: $primary;
      }
      .archive-item-title {
        color: $primary !important;
      }
    }
    .archive-intro {
      padding-top: 20px;
      height: 250px;
      .archive-item-award {
        font: 500 14px/2 "Futura";
        color: #888;
      }
      .archive-item-title {
        margin-top: .8em;
        max-height: 3.3em;
        color: #202020;
        overflow: hidden;
        font: 700 24px/1.65 "Futura";
        transition: color 0.25s;
      }
      .archive-item-author {
        margin-top: .5em;
        font: 300 16px/2 "Futura";
        color: #888;
      }
      .archive-img {
        position: relative;
        overflow: hidden;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
        }
      }
    }
  }
</style>
